<script setup>
import { ref, onMounted, onBeforeUnmount, nextTick, watch } from 'vue'
import * as echarts from 'echarts'

const chartRef = ref(null)
const activeTab = ref('trend')
let chartInstance = null

const chartOptions = {
  trend: {
    tooltip: { trigger: 'axis' },
    legend: { data: ['流量A', '流量B'], top: 10, right: 20 },
    grid: { left: 30, right: 30, top: 40, bottom: 30 },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: ['6:00','7:00','8:00','9:00','10:00','11:00','12:00','13:00','14:00','15:00','16:00','17:00','18:00','19:00','20:00','21:00','22:00','23:00']
    },
    yAxis: {
      type: 'value',
      splitLine: { lineStyle: { color: '#f0f0f0' } }
    },
    series: [
      {
        name: '流量A',
        type: 'line',
        smooth: true,
        data: [0,0,2000,8000,20000,40000,60000,70000,60000,40000,20000,10000,20000,40000,60000,40000,20000,0],
        areaStyle: { color: 'rgba(64,158,255,0.25)' },
        lineStyle: { color: '#409EFF', width: 2 },
        symbol: 'circle',
        symbolSize: 6
      },
      {
        name: '流量B',
        type: 'line',
        smooth: true,
        data: [0,0,1000,2000,8000,12000,20000,30000,20000,10000,8000,6000,10000,20000,30000,20000,10000,0],
        areaStyle: { color: 'rgba(45,197,167,0.18)' },
        lineStyle: { color: '#2dc5a7', width: 2 },
        symbol: 'circle',
        symbolSize: 6
      }
    ]
  },
  month: {
    tooltip: { trigger: 'axis' },
    legend: { data: ['月访问量'], top: 10, right: 20 },
    grid: { left: 30, right: 30, top: 40, bottom: 30 },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']
    },
    yAxis: {
      type: 'value',
      splitLine: { lineStyle: { color: '#f0f0f0' } }
    },
    series: [
      {
        name: '月访问量',
        type: 'line',
        smooth: true,
        data: [20000,30000,40000,35000,50000,60000,70000,80000,75000,70000,65000,60000],
        areaStyle: { color: 'rgba(64,158,255,0.18)' },
        lineStyle: { color: '#409EFF', width: 2 },
        symbol: 'circle',
        symbolSize: 6
      }
    ]
  }
}

function renderChart() {
  if (!chartRef.value) return;
  const { clientWidth, clientHeight } = chartRef.value;
  if (clientWidth === 0 || clientHeight === 0) {
    setTimeout(renderChart, 100);
    return;
  }
  if (!chartInstance) {
    chartInstance = echarts.init(chartRef.value);
  }
  chartInstance.setOption(chartOptions[activeTab.value]);
  chartInstance.resize();
}

function resizeChart() {
  if (chartInstance) chartInstance.resize()
}

onMounted(() => {
  nextTick(() => {
    chartInstance = echarts.init(chartRef.value)
    chartInstance.setOption(chartOptions[activeTab.value])
    window.addEventListener('resize', resizeChart)
  })
})
onBeforeUnmount(() => {
  window.removeEventListener('resize', resizeChart)
  if (chartInstance) chartInstance.dispose()
})

watch(activeTab, () => {
  nextTick(() => {
    if (chartInstance) {
      chartInstance.setOption(chartOptions[activeTab.value])
      chartInstance.resize()
    }
  })
})
</script>
<template>
  <el-tabs v-model="activeTab" class="trend-tabs" tab-position="top">
    <el-tab-pane label="流量趋势" name="trend"></el-tab-pane>
    <el-tab-pane label="月访问量" name="month"></el-tab-pane>
  </el-tabs>
  <div ref="chartRef" class="chart-flex-fill"></div>
</template>
<style scoped>
.trend-tabs {
  background: #fff;
  border-radius: 12px;
  padding: 0 0 8px 0;
}
.chart-flex-fill {
  width: 100%;
  min-height: 400px;
  min-width: 0;
}
</style> 